<template>
  <div class="wrap robot-chatbox">
    <div class="title">{{webchatContent.custName}}<span class="platform">({{platform}})</span><span class="begin-time">&nbsp;&nbsp;{{webchatContent.beginTime}}</span></div>
    <div class="chatUserMsg">
      <div v-for="(chatMsg, index) in webchatContent.docs" class="msg_li clearBoth">
        <div class="chat_item in clearBoth" v-if="chatMsg.type === 'in'">
          <div class="chat_user_info">
            <customer-avatar
              class="client_msg"
              :size="16"
              status="status10"
            ></customer-avatar>
            <div class="chat_time">{{chatMsg.createTime}}</div>
          </div>
          <div class="chat_text_con">
            <div class="chat_content"  :style="(chatMsg.isExistFocusWords && chatMsg.type === 'in')?'background-color:#'+ chatMsg.backgroundColor:''">
              <div class="chat_content_arrow" :style="(chatMsg.isExistFocusWords&&chatMsg.type === 'in')?'border: 5px solid #'+ chatMsg.backgroundColor+';border-color: #'+chatMsg.backgroundColor+' transparent transparent #'+ chatMsg.backgroundColor+'; :'+ '':''"></div>
              <div class="chat_message_con">
                <div class="chat_message_con_text" v-html="chatMsg.question"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="chat_item out clearBoth" v-if=" chatMsg.type === 'out'">
          <div class="chat_content">
            <div class="chat_content_arrow_out"></div>
            <pre class="chat_content_text" v-html="chatMsg.answer" v-if="chatMsg.answerType === '1'||chatMsg.answerType === '3'"></pre>
            <pre class="chat_content_text" v-else-if="chatMsg.answerType === '2'">
            {{$t('configLazyLoad.robotSeven.boxTip1')}}:<br/>
            <template v-for="(one, index) in chatMsg.sugguestions">
              {{index+1+'.'+one}}<br/>
            </template>
          </pre>
            <pre class="chat_content_text" v-else-if="chatMsg.answerType === '4'">
            <span v-html="chatMsg.answer"></span><br/><br/>{{$t('configLazyLoad.robotSeven.boxTip2')}}：<br/>
            <template v-for="(one, index) in chatMsg.sugguestions">
              {{index+1+'.'+one.name}}
            </template>
          </pre>
          </div>
          <div class="chat_user_info_out clearBoth">
            <div class="robot chat_user_gif">
              <i  class="iconfont icon-jiqirentouxiang"></i>
            </div>
            <div class="chat_time">{{chatMsg.createTime}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import customerAvatar from '../../../../ui-modules/customer-avatar/CustomerAvatar.vue'
  export default {
    name: 'webchatbox',
    data () {
      return {
      }
    },
    computed: {
      platform () {
        let platformType = ''
        let platform = this.webchatContent ? this.webchatContent.platform : ''
        if (platform === 'pc') {
          platformType = this.$t('webchat.WebConsultation')
        } else if (platform === 'wap') {
          platformType = this.$t('webchat.platformWap')
        } else if (platform === 'sdk') {
          platformType = this.$t('webchat.SdkConsultation')
        } else if (platform === 'weixin') {
          platformType = this.$t('webchat.weChatCon')
        } else if (platform === 'wxmini') {
          platformType = this.$t('webchat.weChatMini')
        } else if (platform === 'dy') {
          platformType = this.$t('webchat.TikTok')
        } else if (platform === 'wxkf') {
          platformType = this.$t('webchat.platformWXKF')
        } else {
          platformType = this.$t('webchat.platformOther')
        }
        return platformType
      }
    },
    props: {
      webchatContent: Object
    },
    components: {
      customerAvatar
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wrap
    border 1px solid #ccc
    height 100%
    overflow-y auto
    box-sizing border-box
  .title
    border-bottom 1px solid #ccc
    line-height 40px
    font-size 16px
    color $cf-gray0
  .platform
    color $cf-gray2
  .begin-time
    color $cf-gray4
  .content
    height 350px
    overflow-y auto
  .chat_info_box
    overflow hidden
  .chat_info_box .chat_info_label
    display inline-block
  .chat_msg_box
    border-right 1px solid $c-border1
  .active
    background #e8f5fc
  .chat_top
    position relative
    height 35px
    overflow hidden
    box-sizing border-box
    border-bottom 1px solid $c-border1
  .chat_transfer
    float right
  .avatar
    position absolute
    left 0
  .title
    margin-left 14px
  .dic_item
    textarea
      color $cf-gray0
      border-color #999
      width 100%
      padding 6px
      box-sizing border-box
      border-radius 4px
    textarea:focus
      border-color $c-main
  .chat_transfer
    .iconfont
      cursor pointer
      font-size 20px
      margin 0 6px
      line-height 20px
      color $cf-gray5
    .icon-tuichu
      margin-right 10px
  .chatMsgCon
    border-bottom 1px solid $c-border1
  .chat_msg
    padding 14px 16px
    box-sizing border-box
    overflow auto
  .chat_item
    position relative
    width 70%
    padding-left 34px
  .chat_user_info
    position absolute
    left 0
    top 6px
    .chat_time
      position absolute
      white-space nowrap
      font-size 12px
      color #737373
      top -22px
      left 56px
  .chat_user_gif
    border-radius 50%
    width 32px
    height 32px
    overflow hidden
    background-size 32px auto
    img
      background #fff
      width 100%
  .robot
    background $c-border1
    .icon-jiqirentouxiang
      width 32px
      height 32px
      display block
      text-align center
      line-height 32px
      font-size 30px
    .el-dialog__body
      overflow hidden
  .chat_time
    color #9A9A9A
    width auto
    line-height 16px
    text-align center
  .chat_content
    max-width 90%
    padding 8px 12px
    position relative
    margin-left 10px
    border-radius 14px
    background #cce6ff
    display inline-block
    color $cf-gray0
    .chat_img
      max-width 100px
    .send_status
      position absolute
      width 26px
      height 26px
      border-radius 50%
      left -30px
      top 50%
      margin-top -13px
    .send_status.process
    .send_status.failure
      color $c-pink
      text-align center
      line-height 26px
      font-size 24px
    .chat_content_text
      word-break break-all
      white-space normal
      line-height 1.4
      p
        img
          max-width 100%
  .chat_content_arrow
    border-top 6px solid transparent
    border-bottom 6px solid transparent
    border-right 6px solid #cce5ff
    content ' '
    position absolute
    width 0
    height 0
    left -9px
    top 10px
    border-radius 1px
    transform rotate(95deg)
    border 5px solid #cce5ff
    border-color #cce5ff transparent transparent #cce5ff
  .chatPreloadedMsg
    margin-bottom 20px
    .chat_content
      background #1cd0e0
    .chat_content_arrow
      border 5px solid #1cd0e0
      border-color #1cd0e0 transparent transparent #1cd0e0
  .chat_user_info_out
    position absolute
    right 0
    top -2px
    .chat_time
      position absolute
      white-space nowrap
      font-size 12px
      color #737373
      right 56px
      top -16px
  .chat_item.out
    padding-right 38px
    float right
    .chat_user_img
      border-radius 50%
      width 32px
      height 32px
      float right
    .chat_content
      float right
      background #f0f0f0
      margin 0 5px 0 0
      color $cf-gray0
  .chat_content_arrow_out
      border-left 6px solid #f0f0f0
      border-top 6px solid transparent
      border-bottom 6px solid transparent
      border-right 6px solid #f0f0f0
      content ' '
      position absolute
      width 0
      height 0
      right -9px
      top 10px
      border-radius 1px
      transform rotate(83deg)
      border 5px solid #f0f0f0
      border-color transparent transparent #f0f0f0 #f0f0f0
  .chat_item.system
    text-align center
    padding 0
    width 100%
    .chat_content
      display inline-block
      width auto
      height 26px
      border-radius: 13px
      text-align center
      display inline-block
      padding 0 14px
      line-height 26px
      background #f0f0f0
      color $cf-gray0
  .color
    color #1f2d3d
  .msg_li
    min-height 40px
    margin-bottom 25px
  .msg_li.system_li
    height 24px
    margin 10px 0 20px
    min-height 24px
  .client_msg
    height 36px
  .chat_content.image
    img
      cursor pointer
  .chat_message_con_text
    word-break break-all
  .audio_img
    height 15px
    margin-right 15px
  .voice_content.chat_content
    position relative
    .chat_message_con
      cursor pointer
  .chat_info .titleInfo
    cursor pointer
    font-weight bold
    color $cf-gray2
    .el-icon-minus,.el-icon-plus
      color #808080
  .chat_item.in a
    color $c-main
  .chat_item.out a
    color $c-main
  .investigate_con
    span
      /*float none*/
      clear both
      vertical-align bottom
  .el-dialog__wrapper
    z-index 30001 !important
  .VideoTips
    .el-dialog__body
      .tipsword
        text-align center
        font-size 16px
        margin 10px 0
      .tipsbutton
        text-align center
        padding-top 15px
    .el-dialog__header
      padding-bottom 20px
      border-bottom 1px solid #a1a1a1
      span
        color #a2a2a2
  .colorred
    color $c-pink
  .chatUserMsg
  .chatHistoryMsg
    margin-top 25px
    padding 5px
  .chat_item.in
    .chat_message_con
      min-height 1em
      min-width 0.5em
  .chat_auxiliary_box
    padding-right 4px
  .fade-enter-active,
  .fade-leave-active
    transition all 0.5s ease
  .fade-enter,
  .fade-leave-active
    opacity 0
  .send_chat_msg_title
    line-height 30px
    color $cf-gray1
  .time_line_warp
    height calc(100vh - 562px)
    max-height: 250px
    overflow-y auto
    padding-bottom 10px
  .time_line_little
    height 100%
    max-height: 250px
  .uba_page_stay
    font-size 12px
    position absolute
    left 25px
    top 15px
  .uba_time_warp
    display block
  .currentUrl_warp
    display block
    padding-left 5px
    word-break break-all
  .time_line_box
    display flex
  .chat_info_all_title
    font-weight bold
    font-size 14px
    color $cf-gray2
    height 35px
    line-height 35px
    box-sizing border-box
    padding 0 14px
    border-bottom 1px solid $c-border1
  .quickReSys
    padding-bottom 4px
  pre
    font-family Helvetica, BlinkMacSystemFont, Arial, Verdana, sans-serif
  .history_liading
    text-align center
    .history_liading_text
      display inline-block
      span
        vertical-align super
  .icon-shipin
    margin-right 4px
  .wecbat_video_thunmbnail
    max-width 200px
  .wechat_video
    cursor pointer
    color $c-main
    position relative
    .wechat_video_play_icon
      position absolute
      width 100%
      height 100%
  .icon-shipin
    margin-right 4px
  .wecbat_video_thunmbnail_no
    width 200px
    height 150px
    background-color #b7b7b7
</style>
